<script setup lang="ts">
	import { ref, inject } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { checkLogin, msg, picturePreview } from '@/utils/tools'
	import zSwiper from '@zebra-ui/swiper/components/z-swiper/z-swiper.vue'
	import zSwiperItem from '@zebra-ui/swiper/components/z-swiper-item/z-swiper-item.vue'
	import {
		chartAndTxt, getBannerList, getNowBanner,
		getPublickCampOpen, getSportsHotList, noticeList
	} from '@/api/index'
	import { getUnreadMessageList } from '@/api/user'
	const $Prefix = inject('$Prefix')
	onLoad(() => {
		// #ifdef MP-WEIXIN
		uni.showShareMenu({
			withShareTicket: true,
			menus: ["shareAppMessage", "shareTimeline"]
		})
		// #endif
		getBanner()
		getSports()
		getChartAndText()
		getNoticeList()
	})
	onShow(() => {
		checkLogin(true).then(res => {
			getUnReadnotice()
		})
	})
	// 轮播列表
	const bannerList = ref([])
	// 热门训练营
	const hotTrainList = ref([])
	// 轮播当前index
	const currentNum = ref<Number>(0)
	// 信息公告
	const announcementList = ref([])
	const flowOptions = {
		effect: 'coverflow',
		centeredSlides: true,
		slidesPerView: 'auto',
		loop: true,
		coverflowEffect: {
			rotate: 50,
			stretch: 0,
			depth: 100,
			modifier: 1,
			slideShadows: true
		}
	}
	// 往期图片
	const flowList = ref([])
	const flowPreView = ref([])

	const noticeListText = ref([])
	const noticeListTextCopy = ref([])
	// 菜单列表
	const menuList = ref<Array<{ name : string, icon : string, status ?: boolean, url ?: string }>>([
		{
			name: '训练营',
			icon: 'https://pro.star.ihehang.com/mini/static/icons/ui2/ui-201.png',
			status: false,
			url: '/pages/introduce/introduce'
		},
		{
			name: '教练培训',
			icon: 'https://pro.star.ihehang.com/mini/static/icons/ui2/ui-202.png',
			status: false
		},
		{
			name: '城市活动',
			icon: 'https://pro.star.ihehang.com/mini/static/icons/ui2/ui-203.png',
			status: false
		},
	])
	// 菜单点击
	const menuClick = (item : { name : string, icon : string, status ?: boolean, url ?: string }) => {
		if (!item.status) {
			msg('即将上线，敬请期待~')
		} else {
			if (item.name == "赛事") {
				uni.switchTab({ url: item.url })
			} else {
				uni.navigateTo({ url: item.url })
			}

		}
	}
	// 轮播关联

	const zswiper = ref()
	const zswiperthumbs = ref()

	const liveOptions = {
		spaceBetween: 10,
		thumbs: {
			swiper: true
		}
	}
	const optionsThumbs = {
		spaceBetween: 10,
		slidesPerView: 4,
		freeMode: true,
		watchSlidesProgress: true,
		thumbs: {
			use: true
		}
	}
	const setThumbsSwiper = () => {
		zswiper.value.swiper.on("beforeMount", () => {
			zswiper.value.swiper.params.thumbs.swiper = zswiperthumbs.value.swiper;
		})
	}
	// 首页轮播
	const getBanner = () => {
		getBannerList().then(res => {
			if (res.code == 200) {
				bannerList.value = res.data.map((item : any) => {
					item.url = JSON.parse(item.imgUrl)[0].fullUrl + `?time=${new Date().getTime()}`
					return item
				})
			}
		})

	}

	// 获取热门训练营
	const getSports = () => {
		getSportsHotList().then(res => {
			if (res.code == 200) {
				hotTrainList.value = res.data.data
			}
		})

	}
	const bannerChange = (e : { current : number }) => {
		currentNum.value = e.current
	}
	const navigateTo = (url : string) => {
		uni.navigateTo({ url })
	}
	const navigateSwitchTab = (url : string) => {
		uni.switchTab({ url })
	}

	const getUnReadnotice = () => {
		getUnreadMessageList().then(res => {
			const data = JSON.parse(JSON.stringify(res.data))
			noticeListTextCopy.value = data
			noticeListText.value = data.map((item : any) => {
				return item.title
			})
		})
	}

	const campOpen = ref(false)
	// 获取图文直播
	const getChartAndText = () => {
		// getPublickCampOpen().then((_res:any) => {
		//   campOpen.value = _res.data
		//   if (_res.data){
		//     getNowBanner().then(res => {
		//       let previousList = []
		//       flowPreView.value = []
		//       previousList = JSON.parse(JSON.stringify(res.data)).map((item:any,index:number) => {
		//         item.fileAddress = JSON.parse(item.fileAddress)
		//         return item.fileAddress[0]
		//       })
		//       flowList.value = flowList.value.concat(previousList)
		//       flowPreView.value = flowList.value.map((item:any) => {
		//         return item.fullUrl
		//       })
		//     })
		//   } else {
		chartAndTxt({ pageNo: 1, pageSize: 10 }).then(res => {
			let previousList = []
			flowPreView.value = []
			previousList = JSON.parse(JSON.stringify(res.data.data)).map((item : any, index : number) => {
				item.fileAddress = JSON.parse(item.fileAddress)
				return item.fileAddress[0]
			})
			flowList.value = flowList.value.concat(previousList)
			flowPreView.value = flowList.value.map((item : any) => {
				return item.fullUrl
			})
		})
		//   }
		// })
	}

	// 点击swiper
	const swiperChangeClick = (index : any) => {
		const item = bannerList.value[index]
		if (item.jumpEnum == 1) {

		} else if (item.jumpEnum == 2) {
			uni.navigateTo({
				url: `/pages/index/bannerDetails?item=${JSON.stringify(item)}`
			})
		} else if (item.jumpEnum == 4) {
			//todo 跳转tabbar与非tabbar地址不一样   建议后台给值判断是否tabbar页面
			const tabbarList = ['/pages/index/index', '/pages/matchDetails/matchDetails', '/pages/pictureAndText/pictureAndText', '/pages/user/user']
			if (item.jumpAddress && tabbarList.includes(item.jumpAddress)) {
				uni.switchTab({
					url: item.jumpAddress
				})
			} else {
				uni.navigateTo({
					url: item.jumpAddress
				})
			}
		} else if (item.jumpEnum == 3) {
			uni.navigateTo({
				url: `/pages/webView/webView?url=${item.jumpAddress}`
			})
		}


	}

	// 获取信息
	const getNoticeList = () => {
		noticeList({ pageNo: 1, pageSize: 10 }).then(res => {
			if (res.code == 200) {
				res.data.data.map((item : any) => {
					item.pic = JSON.parse(item.pic)
					return item
				})
				announcementList.value = res.data.data
			} else {
				announcementList.value = []
			}
		})
	}

	const noticeClick = (index : any) => {
		uni.navigateTo({ url: `/pages/notification/detailsNotion?id=${noticeListTextCopy.value[index].id}` })
	}

	const handlerClick = () => {
		hierarchy.value.show()
	}
</script>
<template>
	<view class="banner">
		<u-swiper :list="bannerList" indicatorStyle="right" :indicator="true" circular radius="0" height="100%"
			interval="5000" @click="swiperChangeClick" imgMode="widthfix" @change="bannerChange">
			<template #indicator>
				<view class="indicator">
					<text class="indicator-num__text">{{ currentNum + 1 }} / {{ bannerList?.length }}</text>
				</view>
			</template>
		</u-swiper>
	</view>
	<view class="home-body">
		<view class="home-body-header">
			<!--    公告栏目-->
			<view class='scroll' v-if="noticeListText.length > 0">
				<up-notice-bar :text="noticeListText" direction="column" color="#5BA88C"
					bgColor="rgba(30, 161, 196, 0.1)" @click="noticeClick" duration="2500" />
			</view>

			<!--    菜单-->
			<view class="menu-list" :scroll-x="true">
				<view class="menu-item" @click="menuClick(item)" v-for="item in menuList" :key="item.name">
					<!--          :style="{'backgroundImage':`url('${$Prefix}/public/images/smallImage/home-btn-bg.png')`}"-->
					<view class="menu-item-btn">
						<image class="menu-icon" :src="item.icon"
							mode="heightFix" />
					</view>
					<view class="menu-item-text">{{item.name}}</view>
				</view>
			</view>

			<view class="about-btn" @click="navigateTo('/pages/trainingCamp/trainingCamp')">
				<view class="left">
					<view class="logo"></view>
					<view class="title">关于我们</view>
					<view class="sub-title">ABOUT US</view>
				</view>
				<view class="right">
					<view class="btn"></view>
				</view>
			</view>

			<!--      <view class="about-btn" @click="navigateSwitchTab('/pages/pictureAndText/pictureAndText')">
        <image :src="`${$Prefix}/public/images/smallImage/liveBroadcast.png`" mode="widthFix"/>
      </view> -->
		</view>

		<view class="bg">
			<block v-if='false'>
				<view class="hot-train">
					<view class="hot-train-text">
						<image class="train-title" mode="heightFix"
							:src="`${$Prefix}/public/images/smallImage/live-title.png`" />
					</view>
					<view class="hot-train-action" @click="navigateSwitchTab('/pages/pictureAndText/pictureAndText')">
						查看更多
						<image class="right-arrow" :src="`${$Prefix}/public/images/smallImage/right-icon.png`" />
					</view>
				</view>
				<view class="live-body" v-if='flowList.length > 0' style='margin-bottom: 32rpx'>
					<view class="live-bg"></view>
					<z-swiper ref="zswiper" v-model="flowList" :options="liveOptions">
						<z-swiper-item v-for="(item,index) in flowList" :key="index">
							<image class="image" @click="picturePreview(item.fullUrl,flowPreView)"
								:src="item.full_thumb_url" mode="aspectFill"></image>
						</z-swiper-item>
					</z-swiper>
					<view class="live-title">
						<up-icon name="camera" color="#ffffff" size="20"></up-icon>
						<text>记录营中精彩瞬间</text>
					</view>
					<view class="swiper-dot">
						<z-swiper ref="zswiperthumbs" :custom-style="{'margin-top':'10rpx'}" v-model="flowList"
							:options="optionsThumbs" @swiper="setThumbsSwiper">
							<z-swiper-item v-for="(item,index) in flowList" :key="index">
								<view class="image-item">
									<image :src="item.full_thumb_url" mode="aspectFill"> </image>
								</view>
							</z-swiper-item>
						</z-swiper>
					</view>
				</view>
				<view v-else style='margin-bottom: 32rpx'>
					<up-empty width="80px" height="100px" text="暂无训练营直播" textColor="#515462"
						:icon="`${$Prefix}/public/images/smallImage/emty.png`" />
				</view>
			</block>
			<!--    热门训练营-->
			<!-- <view class="hot-train">
				<view class="hot-train-text">
					<image class="train-title" mode="heightFix"
						:src="`${$Prefix}/public/images/smallImage/camp-signUp.png`" />
				</view>
				<view class="hot-train-action" @click="navigateSwitchTab('/pages/train/train')">
					查看更多
					<image class="right-arrow" :src="`${$Prefix}/public/images/smallImage/right-icon.png`" />
				</view>
			</view> -->
			<!--      scroll-view-->
			<!-- <view class="hot-train-body" :scroll-x="true" v-if="hotTrainList.length > 0">
				<view class="hot-train-body-item" v-for="(item,index) in hotTrainList" :key="index"
					@click="navigateTo(`/pages/trainDetails/trainDetails?id=${item.id}&campId=${item.campId}`)">
					<view class="hot-header">
						<view class="title">{{item.categoryName}}</view>
						<view class="icon">
							<u-icon name="play-circle-fill" color="#B5BCC9" size="20px"></u-icon>
						</view>
					</view>
					<view class="hot-body">
						<view class="hot-body-item">
							<view class="hot-body-left">
								<view class="hot-body-title">{{item.name}}</view>
								<view class="hot-body-bottom">
									<view class="hot-body-time"
										v-if="item.plannedStartTime && item.plannedCompletionTime">
										{{item.plannedStartTime}} ~ {{item.plannedCompletionTime}}
									</view>
								</view>
							</view>
							<view class="hot-body-right">
								<image :src=" item.banner && item.banner[0].fullUrl" />
							</view>
						</view>
					</view>
				</view>
			</view> -->
			<!-- <up-empty v-else mode="list" iconSize="40" /> -->
			<!--    选星咨询-->
			<view class="start-info">
				<view class="hot-train-text">
					<view class="block"></view>
					<view class="text">选星资讯</view>
				</view>
				<view class="hot-train-action" @click="navigateTo('/pages/announcement/announcement')">
					<u-icon name="arrow-right"></u-icon>
				</view>

			</view>
			<view class="consulting-service-body">
				<block v-if="announcementList.length > 0">
					<view @click="navigateTo(`/pages/announcementDetails/announcementDetails?id=${item.id}`)"
						class="service-item-text" v-for="(item,index) in announcementList" :key="index">
						<view class="text-left">
							<view class="border-rect"></view>
							<view class="title">{{item.title}}</view>
							<image v-if="index==0" mode="heightFix"
								src="https://pro.star.ihehang.com/mini/static/icons/ui-108.png" />
						</view>
						<view class="text-right">
							<text>{{item.createdTime}}</text>

						</view>
					</view>
				</block>
				<up-empty v-else mode="message" iconSize="40" />
			</view>
			<!--    训练营直播-->
			<block v-if="campOpen">
				<view class="hot-train">
					<view class="hot-train-text">
						<image class="train-title" mode="heightFix"
							:src="`${$Prefix}/public/images/smallImage/live-title.png`" />
					</view>
					<view class="hot-train-action" @click="navigateSwitchTab('/pages/pictureAndText/pictureAndText')">
						查看更多
						<image class="right-arrow" :src="`${$Prefix}/public/images/smallImage/right-icon.png`" />
					</view>
				</view>
				<view class="live-body" v-if='flowList.length > 0'>
					<view class="live-bg"></view>
					<z-swiper ref="zswiper" v-model="flowList" :options="liveOptions">
						<z-swiper-item v-for="(item,index) in flowList" :key="index">
							<image class="image" @click="picturePreview(item.fullUrl,flowPreView)"
								:src="item.full_thumb_url" mode="aspectFill"></image>
						</z-swiper-item>
					</z-swiper>
					<view class="live-title">
						<up-icon name="camera" color="#ffffff" size="20"></up-icon>
						<text>记录营中精彩瞬间</text>
					</view>
					<view class="swiper-dot">
						<z-swiper ref="zswiperthumbs" :custom-style="{'margin-top':'10rpx'}" v-model="flowList"
							:options="optionsThumbs" @swiper="setThumbsSwiper">
							<z-swiper-item v-for="(item,index) in flowList" :key="index">
								<view class="image-item">
									<image :src="item.full_thumb_url" mode="aspectFill"> </image>
								</view>
							</z-swiper-item>
						</z-swiper>
					</view>
				</view>
				<view v-else>
					<up-empty width="80px" height="100px" text="暂无训练营直播" textColor="#515462"
						:icon="`${$Prefix}/public/images/smallImage/emty.png`" />
				</view>
			</block>
			<!--    往期计划-->
			<block v-if="false">
				<view class="hot-train">
					<view class="hot-train-text">
						<image class="train-title" mode="heightFix"
							:src="`${$Prefix}/public/images/smallImage/previousPeriod-team.png`" />
					</view>
					<view class="hot-train-action" @click="navigateTo('/pages/introduce/introduce')">
						查看更多
						<image class="right-arrow" :src="`${$Prefix}/public/images/smallImage/right-icon.png`" />
					</view>
				</view>
				<view class="previousPeriods" v-if="flowList.length > 0">
					<z-swiper v-model="flowList" :options="flowOptions">
						<z-swiper-item v-for="(item,index) in flowList" :custom-style="{width:'500rpx'}" :key="index">
							<image class="image" :src="item.fullUrl" mode="aspectFill"> </image>
						</z-swiper-item>
					</z-swiper>
				</view>
				<up-empty width="80px" v-if="flowList.length == 0" height="100px" text="暂无训练营风采" textColor="#515462"
					:icon="`${$Prefix}/public/images/smallImage/emty.png`" />
				<view class="bulletChat">
					<view class="detail_img">
						<view class="bottom"></view>
						<view class='dmGroup' v-for="(item,index) in dmData" :key="index"
							:style="{top:item.top +'%',animationDuration:item.time + 's',animationTimingFunction:'linear',animationDelay:index*3+'s',animationIterationCount:'infinite',animationPlayState:'running'}">
							<view class='dmItem'>
								<view class='dm'>
									<view class='avatarBox'>
										<image :src='item.avatar' class='avatar' mode='aspectFit'></image>
									</view>
									<view class='content'>
										<view class="header">{{ item.name }}</view>
										<view class="desc">{{ item.desc }}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>

	</view>
	<!-- <xx-movable-area /> -->
</template>
<style lang="scss" scoped>
	.banner {
		height: 480rpx;

		::v-deep .u-swiper__indicator {
			right: 10px;
			bottom: 25px;
		}

		::v-deep .u-swiper__wrapper__item__wrapper {
			height: 100%;
		}

		.indicator {
			background: rgba(0, 0, 0, 0.4);
			backdrop-filter: blur(10px);
			border-radius: 29px;
			padding: 6rpx 14rpx;
			font-size: 24rpx;
			color: #FFFFFF;
			font-weight: 500;
			line-height: normal;
		}
	}

	.home-body-header {
		padding: 32rpx 20rpx;

		.about-btn {
			margin-top: 32rpx;
			margin-bottom: 16rpx;
			width: 100%;
			background: rgba(51, 51, 51, 0.8);
			border-radius: 4px;
			backdrop-filter: blur(10px);
			height: 120rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 40rpx;

			.left {
				display: flex;

				.logo {
					width: 40rpx;
					height: 40rpx;
					background-image: url("https://pro.star.ihehang.com/mini/static/icons/logo.png");
					background-size: 100%;
					background-position: center;
				}

				.title {
					font-family: AlimamaFangYuanTiVF, AlimamaFangYuanTiVF;
					font-weight: bold;
					font-size: 32rpx;
					color: #FFF5E5;
					line-height: 38rpx;
					text-align: center;
					font-style: normal;
					margin-left: 20rpx;
				}

				.sub-title {
					font-family: AlimamaFangYuanTiVF, AlimamaFangYuanTiVF;
					font-weight: 400;
					font-size: 20rpx;
					color: #FFF5E5;
					line-height: 24rpx;
					text-align: center;
					font-style: normal;
					margin-left: 20rpx;
					margin-top: 18rpx;
				}
			}

			.right {
				.btn {
					width: 40rpx;
					height: 40rpx;
					background-image: url("https://pro.star.ihehang.com/mini/static/icons/ui2/ui-200.png");
					background-size: 100%;
					background-position: center;
				}
			}
		}
	}

	.bg {
		border-radius: 30rpx 30rpx 0 0;
		background-color: #F6F9F2;
		padding: 28rpx 20rpx;
		box-sizing: border-box;
	}

	.home-body {
		position: relative;
		background-color: #FFFFFF;
		border-radius: 24rpx 24rpx 0 0;
		//margin-top: -20px;
		z-index: 1;
		box-sizing: border-box;
		width: 100%;

		.menu-list {
			//white-space: nowrap;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.menu-item {
				display: inline-block;
				text-align: center;

				//width: 20%;
				//margin-right: 30rpx;
				&:last-child {
					margin-right: 0;
				}

				.menu-item-btn {
					//width: 145rpx;
					//height: 96rpx;
					height: 100rpx;
					background-size: 100% 100%;
					background-position: center;
					background-repeat: no-repeat;
					margin-bottom: 8rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.menu-icon {
						//width: 55rpx;
						width: 100rpx;
						height: 100rpx;
					}
				}

				.menu-item-text {
					color: #505363;
					margin-top: 5rpx;
					font-size: 26rpx;
				}
			}
		}

		.hot-train {
			//height: 68rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.train-title {
				height: 40rpx;
				font-family: OPPOSans, OPPOSans;
				font-weight: normal;
				font-size: 40rpx;
				color: #333333;
				line-height: 62rpx;
				text-align: center;
				font-style: normal;
			}

			.hot-train-action {
				color: #818496;
				font-size: 24rpx;
				line-height: 20px;
				border-radius: 52px;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 4rpx 12rpx 4rpx 12rpx;
				box-sizing: border-box;
				border: 1px solid rgba(129, 132, 150, 0.6);

				.right-arrow {
					width: 28rpx;
					height: 28rpx;
					margin-left: 5rpx;
				}
			}
		}

		.hot-train-body {
			//white-space: nowrap;
			margin-top: 16rpx;
			margin-bottom: 32rpx;

			//background: linear-gradient(180deg, #F4F7EF 2%, #F6F7F5 100%);
			//padding: 24rpx 32rpx;
			//box-sizing: border-box;
			//margin-top: 10rpx;
			//border-radius: 15rpx;
			.hot-train-body-item {
				display: inline-block;
				width: 100%;
				padding: 24rpx 32rpx;
				border-radius: 16rpx;
				margin-top: 15rpx;
				box-shadow: 0 3px 14px 2px rgba(167, 217, 84, 0.05), 0px 8px 10px 1px rgba(194, 196, 190, 0.06), 0px 5px 5px -3px rgba(194, 196, 190, 0.1);
				background: #FFFFFF;

				&:first-child {
					margin-top: 0
				}

				.hot-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 36rpx;
					color: #6E7080;
					margin-bottom: 20rpx;
				}

				.hot-body {
					//margin-top: 20rpx;
					width: 100%;
					white-space: normal;

					.hot-body-item {
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 180rpx;
						width: 100%;

						.hot-body-left {
							width: calc(100% - 230rpx);
							height: 100%;
							display: flex;
							margin-right: 10rpx;
							flex-direction: column;
							justify-content: space-between;
							line-height: normal;

							.hot-body-title {
								font-size: 28rpx;
								font-weight: 500;
								height: 72rpx;
								color: #21252E;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								white-space: normal;
							}

							.hot-body-sign {
								font-size: 24rpx;
								color: #818496;
								margin-bottom: 5rpx;
							}

							.hot-body-time {
								font-size: 24rpx;
								color: #818496;
							}
						}

						.hot-body-right {
							width: 220rpx;
							height: 100%;
							border-radius: 8rpx;
							overflow: hidden;
							position: relative;

							.static {
								position: absolute;
								z-index: 1;
							}

							image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}
		}

		.consulting-service-body {
			padding: 16rpx 0;
			margin-top: 16rpx;
			margin-bottom: 36rpx;
			box-sizing: border-box;
			background: #ffffff;
			border-radius: 15rpx;
			overflow: hidden;
			box-shadow: 0px 3px 14px 2px rgba(167, 217, 84, 0.05), 0px 8px 10px 1px rgba(194, 196, 190, 0.06), 0px 5px 5px -3px rgba(194, 196, 190, 0.1);

			.service-item {
				position: relative;

				image {
					width: 100%;
				}

				.service-text {
					position: absolute;
					padding: 0 24rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					background: rgba(0, 0, 0, .5);
					color: #FFFFFF;
				}
			}

			.service-item-text {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 16rpx 0;
				margin: 0 24rpx;
				color: #505363;
				font-size: 28rpx;
				font-weight: 500;

				//border-bottom: 1rpx solid #EBEBEB;
				.text-left {
					width: calc(100% - 156rpx);
					display: flex;
					align-items: center;

					.title {
						width: calc(100% - 73rpx);
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.border-rect {
						width: 15rpx;
						height: 15rpx;
						margin-right: 10rpx;
						border: 1rpx solid #92C75B;
						transform: rotate(45deg);
					}

					image {
						width: 40rpx;
						height: 40rpx;
						margin-left: 8rpx;
						position: relative;
						top: -4rpx;
					}
				}

				.text-right {
					text-align: right;


				}

				&:last-child {
					border-bottom: none;
				}
			}
		}
	}

	.live-body {
		margin-top: 16rpx;
		position: relative;
		min-height: 500rpx;

		.live-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 90%;
			height: 500rpx;
			border-radius: 0 0 144rpx 8rpx;
			opacity: 1;
			background: linear-gradient(90deg, #7FAD4F 0%, #A5E067 104%, #92C75B 104%);
			backdrop-filter: blur(10px);
		}

		.image {
			height: 420rpx;
			width: 100%;
			border-radius: 8rpx 24rpx 24rpx 0;
		}

		.swiper-dot {
			margin-top: 30rpx;

			.image-item {
				padding: 10rpx;
				height: 120rpx;
				border-radius: 10rpx;
				background: #FFFFFF;

				image {
					width: 100%;
					height: 100%;
					border-radius: 5rpx;
				}
			}

			::v-deep .swiper-slide-thumb-active {
				border: 1px solid #9BD16A;
				border-radius: 10rpx;
			}
		}

		.live-title {
			position: relative;
			z-index: 2;
			color: #FFFFFF;
			height: 50rpx;
			line-height: 30rpx;
			font-size: 32rpx;
			padding: 0 20rpx;
			display: flex;
			align-items: center;

			text {
				margin-left: 5rpx;
			}
		}
	}

	.previousPeriods {
		margin-top: 10rpx;

		.image {
			height: 300rpx;
			width: 100%;
		}
	}

	.detail_img {
		width: 100%;
		position: relative;
		overflow: hidden;
		display: flex;
	}

	.bottom {
		width: 100%;
		height: 350rpx;
	}

	.dmGroup {
		position: absolute;
		top: 140rpx;
		left: 100%;
		z-index: 10;
		animation-timing-function: linear;
		animation-fill-mode: none;
		transform: translateZ(0);
		white-space: nowrap;
		height: 60rpx;
		animation: dmAnimation infinite linear 4s;
	}

	.dmItem {
		display: inline-flex;
		margin-right: 60rpx;
		white-space: nowrap;
	}

	.dmItem .dm {
		display: inline-flex;
		vertical-align: middle;
		align-items: center;
		position: relative;
		padding: 15rpx;
		box-sizing: border-box;
		background: #F8F8F8;
		border-radius: 25rpx;
		overflow: hidden;
		font-size: 24rpx;
	}

	.dmItem .avatarBox {
		display: inline-block;
		position: relative;
		width: 80rpx;
		height: 80rpx;
		margin-right: 10rpx;
	}

	.dmItem .avatarBox image {
		width: 80rpx;
		height: 80rpx;
	}

	.dmItem .avatarBox .avatar {
		width: 80rpx;
		height: 80rpx;
		border: 0;
		border-radius: 50%;
		overflow: hidden;
	}

	.dmItem .dm .content {
		display: inline-block;
		max-width: 500rpx;
		margin-right: 10rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.dmItem .dm .content {
		display: inline-block;
		margin-left: 10rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;

		.header {
			font-size: 28rpx;
			color: #CE1126;
			margin-bottom: 5rpx;
		}

		.desc {
			color: #505363;
			font-size: 24rpx;
		}
	}

	@keyframes dmAnimation {
		from {
			left: 100%;
		}

		to {
			left: -100%;
		}
	}

	.scroll {
		margin-bottom: 20rpx;

		::v-deep .u-notice-bar {
			border-radius: 20rpx;
		}
	}

	.start-info {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.hot-train-text {
			font-family: OPPOSans, OPPOSans;
			font-weight: normal;
			font-size: 40rpx;
			color: #333333;
			line-height: 62rpx;
			text-align: center;
			font-style: normal;
			display: flex;
			align-items: center;

			.block {
				width: 12rpx;
				height: 36rpx;
				background: #FFD200;
				border-radius: 6rpx;
				margin-right: 18rpx;
			}
		}
	}
</style>